<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
    </style>
    <script>
        function clickDiv(){
            // alert("正在点击div");
            location.href = "01-hello.html";
        }
        function clickA(){
            // alert("正在点击超链接");
            document.getElementById("d1").style.display = "none";
            // 阻止事件冒泡
            // cancelBubble属性:设置或返回事件是否应该向上层级进行传播。
            // 即:是否阻止事件冒泡,true-阻止,false-不阻止
            event.cancelBubble = true;
        }
        function f1(){
            // event对象属于JS内置对象
            console.log(event);
        }
        function f2(e){
            console.log(e);
        }
        function f3(){
            console.log("鼠标所在的水平坐标:"+event.clientX);
            console.log("鼠标所在的垂直坐标:"+event.clientY);
        }
    </script>
</head>
<body>
<div id="d1" style="width: 200px;height: 100px;background: #ff7f6a;" style="display: block;" onclick="clickDiv()" onmouseover="f3()">
    <a href="javascript:;" onclick="clickA()">X</a>
</div>
<hr/>
<button onclick="f1()">获取Event对象</button>
<button onclick="f2(event)">获取Event对象2</button>
<hr/>
</body>
</html>